import React, { useState } from 'react';
import {NavLink} from 'react-router-dom';

import { Table, Space, Image, Avatar, Input, Button } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import "./style/DMManagement.less"

// const { Column, ColumnGroup } = Table;
const { Search } = Input;


export default function JubenManagement(props) {

    const dataSource = [
        {
            key: 1,
            id: 1,
            name: '蓉城有约',
            publishYear: '2022/10/20',
            type1: "独家",
            type2: "还原",
            type3: "现代",
            firstImg: "url",
            img: "url",
            description: "情感"
        },
        {
            key: 2,
            id: 2,
            name: '蓉城有约',
            publishYear: '2022/10/20',
            type1: "独家",
            type2: "还原",
            type3: "现代",
            firstImg: "url",
            img: "url",
            description: "情感"
        },
        {
            key: 3,
            id: 3,
            name: '蓉城有约',
            publishYear: '2022/10/20',
            type1: "独家",
            type2: "还原",
            type3: "现代",
            firstImg: "url",
            img: "url",
            description: "情感"
        },
      ];
      
      const columns = [
        {
          title: '剧本首图',
          dataIndex: 'firstImg',
          key: 'firstImg',
          align: "center",
          className: "table-head-bg",
          render: (text, record) => <Image width={64} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
        },
        {
            title: '剧本名',
            dataIndex: 'name',
            key: 'name',
            className: "table-head-bg",
        },
        {
            title: '发行时间',
            dataIndex: 'publishYear',
            key: 'publishYear',
            align: 'center',
            className: "table-head-bg",
        },
        {
          title: '类型1',
          dataIndex: 'type1',
          key: 'type1',
          className: "table-head-bg",
          filters: [
            {
                text: '盒装',
                value: '盒装'
            },
            {
                text: '城限',
                value: '城限'
            },
            {
                text: '独家',
                value: '独家'
            }
          ],
        },
        {
            title: '类型2',
            dataIndex: 'type2',
            key: 'type2',
            className: "table-head-bg",
            filters: [
                {
                    text: '情感',
                    value: '情感'
                },
                {
                    text: '硬核',
                    value: '硬核'
                },
                {
                    text: '还原',
                    value: '还原'
                }
              ],
        },
        {
            title: '类型3',
            dataIndex: 'type3',
            key: 'type3',
            className: "table-head-bg",
            filters: [
                {
                    text: '古风',
                    value: '古风'
                },
                {
                    text: '民国',
                    value: '民国'
                },
                {
                    text: '现代',
                    value: '现代'
                }
            ],
        },
        {
            title: '操作',
            key: 'action',
            align: "center",
            render: (_, record) => (
                <Space size="middle" className='operate-link'>
                    <a>编辑</a>
                    {/* <a onClick={viewInfo(record.id, record.name)}>查看</a> */}
                    <NavLink to={`/management/dmInfromation/${record.id}`}>查看</NavLink>
                    <a>删除</a>
                </Space>
            ),
            className: "table-head-bg",
        },
      ];
      const onSearch = (value) => console.log(value);
      const getRowClassName = (_, index) => {
        return index % 2 === 0 ? "oddRow" : "evenRow";
      }
      const viewInfo = (id, name) => {
        this.props.history.push(`/management/dmInfromation/${id}/${name}`);
      }

    const [total,setTotal] = useState(dataSource.length);

    return (
        <div>
            <div className="mapage-header">{props.title}</div>
            <div className='madata-container'>
                <div className='madata-search'>
                    <Search placeholder="请输入想查找的剧本名" enterButton allowClear onSearch={onSearch} style={{ width: 400 }} />
                </div>
                <Table 
                    dataSource={dataSource}
                    columns={columns} 
                    pagination={{
                        showSizeChanger:true,
                        showQuickJumper:true,
                        showTotal: (total) => `Total ${total} items`,
                        position: ["bottomCenter"]
                    }}
                    style={{marginTop:20}}
                />
            </div>
        </div>
    )
}

